<template>
    <!-- <div>封堵白名单</div> -->
    <a-row>
      <a-col>
        <a-card :bordered="false" style="margin-bottom: 10px">
          <!-- 查询区域 -->
          <!-- <div class="search-wrapper-btn">
              <a-button type="link" @click="show = !show">
                <span v-if="!show">展开
                  <a-icon type="down" />
                </span>
                <span v-else>收起
                  <a-icon type="up" />
                </span>
              </a-button>
            </div> -->
          <div class="table-page-search-wrapper">
            <a-form-model ref="ruleForm" :model="pageFilter" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row style="display:flex">
                <a-col :span="6">
                <a-form-model-item label="策略名称">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.policyName"/>
                </a-form-model-item>
                </a-col>
                <a-col :span="6">
                  <a-form-model-item label="周期">
                    <a-select v-model="pageFilter.cycle" allowClear placeholder="请选择" style="width:100%;">
                      <a-select-option value=" ">全部</a-select-option>
                      <a-select-option v-for="(item, key) in cycle" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="6">
                <a-form-model-item label="启用状态" style="margin-left:0px">
                  <a-select v-model="pageFilter.enableStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option value=" ">全部</a-select-option>
                    <a-select-option value="1">启用</a-select-option>
                    <a-select-option value="0">禁用</a-select-option>
                    <!-- <a-select-option v-for="(item, key) in enableStatus" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                    </a-select-option> -->
                  </a-select>
                </a-form-model-item>
              </a-col>
                  <a-col :span="6" style="margin-left:0px">
                    <a-space :size="6">
                      <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                      <a-button @click="onResetForm" icon="reload">重置</a-button>
                    </a-space>
                  </a-col>   
              </a-row>
            </a-form-model>
          </div>
        </a-card>
        <a-card :bordered="false">
          <div>
            <a-button type="primary" @click="onAdd" style="margin-right:10px">新增</a-button>
            <a-button type="danger" @click="onDelete" style="margin-right:10px" ghost>删除</a-button>
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
              :columns="columns" :dataSource="pageData" @selectedRowKey="onSelectedRow" @change="onTableChange">
              <template slot="action" slot-scope="text, record">
                    <a-button type="link" @click="ChangeEnableStatus(record,2)" v-if="record.enableStatus == 1">禁用</a-button>
                    <a-button type="link" @click="ChangeEnableStatus(record,1)" v-if="record.enableStatus == 0">启用</a-button>
                    <a-button type="link" @click="ChangeEnableStatus(record,1)" v-if="record.enableStatus == 2">启用</a-button>
                    <a-button type="link" @click="Details(record)">详情</a-button>
              </template>
              <template slot="cycle" slot-scope="text, record">
                    <span>{{ cycle[record.cycle-1]?cycle[record.cycle-1].title:'' }}</span>
              </template>
              <template slot="enableStatus" slot-scope="text, record">
                <!-- <span>{{ enableStatus[record.enableStatus-1]?enableStatus[record.enableStatus-1].title:'' }}</span> -->
                <span>{{ text == 1?enableStatus[0].text:enableStatus[1].text }}</span>
              </template>
            </z-table>
          </div>
        </a-card>
      </a-col>
      <AddModal ref="addModalId" :title=title  @ok="onQuery" @add="onQuery"/>
    </a-row>
  </template>
  
  <script>
  import { getDictItemsFromCache } from '@/api/api'
  import AddModal from '@/views/plugging/police/modules/VerificationAddModal'
  import { pageBlockingAutoRandom,delBlockingAutoRandom,modifyBlockingAutoRandom} from '@/api/plugging/Police'
  export default {
    components: {
    AddModal
  },
  mounted () {
    this.onQuery()
  },
    data () {
      return {
        cycle: getDictItemsFromCache('fd_cycle'),
        enableStatus: getDictItemsFromCache('pl_enableStatus'),
        modifyUnsealVarifiStartDTO:{},
        idsDTO:{
          ids:[]
        },
        idsDTOcache:{
          ids:[]
        },
        title:'',
        show:false,
        labelCol: { span: 5 },
        wrapperCol: { span: 16 },
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: {},
        columns:[
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          },
          {
            title: '策略名称',
            dataIndex: 'policyName',
            align: 'center',
            width: 90,
            customRender: (text) => {
            return <j-ellipsis value={text} length={7} />
            },
          },
          {
            title: '起始时间',
            dataIndex: 'startTime',
            align: 'center',
            width: 120,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '截止时间',
            dataIndex: 'endTime',
            align: 'center',
            width: 120,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '周期',
            dataIndex: 'cycle',
            align: 'center',
            scopedSlots: { customRender: 'cycle' },
            width:90
          },
          {
            title: '启用状态',
            dataIndex: 'enableStatus',
            align: 'center',
            scopedSlots: { customRender: 'enableStatus' },
            width:90
          },
          {
            title: '最近执行时间',
            dataIndex: 'executionTime',
            align: 'center',
            width:120
          },
          {
            title: '最近业务编号',
            dataIndex: 'recentBusinessNumber',
            align: 'center',
            width:120
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
            width: 120,
            customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
            },
          },
          {
            title: '创建人',
            dataIndex: 'createBy',
            align: 'center',
            width: 80,
            customRender: (text) => {
            return <j-ellipsis value={text} length={6} />
            },
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
            width:150
          },
          
        ]
      }
    },
    methods: {
      ChangeEnableStatus(record,enableStatus){
        this.modifyUnsealVarifiStartDTO.id = record.id
        this.modifyUnsealVarifiStartDTO.enableStatus = enableStatus
        if(enableStatus == 1){
          const estatus = this.pageData.records.some(item => {
              return item.enableStatus == 1
          });
          // if(estatus){ this.$message.info('当前没有策略为启用状态，请选择一个策略')}
          if(estatus){ this.$message.warn('已有启用的状态，请先禁用再添加')}
          else{ 
            modifyBlockingAutoRandom(this.modifyUnsealVarifiStartDTO).then( res => {
              if (res.success) {
                console.log(res);
                this.refreshTable()
              } else {
                this.$message.success(res.message)
                this.loading = false
              }
              })
              .catch((e) => {
                this.loading = false
                this.$message.warn('请求失败！')
              })
          }
        }
        else{
          modifyBlockingAutoRandom(this.modifyUnsealVarifiStartDTO).then( res => {
              if (res.success) {
                console.log(res);
                this.refreshTable()
              } else {
                this.$message.success(res.message)
                this.loading = false
              }
              })
              .catch((e) => {
                this.loading = false
                this.$message.warn('请求失败！')
              })
        }
      },
      Details(record){
      this.title = "编辑任务"
      this.$refs.addModalId.show(record)
      },
      onAdd() {
      this.title = "新增任务"
      this.$refs.addModalId.show()
      },
      onDelete() {
          let ids = this.idsDTO
          let doDelete = () => {
            delBlockingAutoRandom(ids).then( res => {
                if (res.success) {
                  this.$message.success(res.message)
                  this.onQuery()
                  this.$refs.table.onClearRowKeys()
                } else {
                  this.$message.success(res.message)
                  this.loading = false
                }
                })
                .catch((e) => {
                  this.loading = false
                  this.$message.warn('请求失败！')
                })
                
          }
          this.$confirm({
          title: `是否确定删除对应的记录`,
          okText: "确定",
          okType: "danger",
          cancelText: "取消",
          async onOk() {
            doDelete()
          },
          onCancel(){
          }
        });
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
        // console.log(this.pageData);
      },
      //重置
      onResetForm() {
        this.pageFilter = {
          pageNo: 1,
          pageSize: 10,
          // departmentId: this.departmentId
        }
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.idsDTO.ids = keys
        this.isDisabled = keys.length > 0 ? false : true
        console.log(this.idsDTO.ids);
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
      this.loading = true
      pageBlockingAutoRandom(this.pageFilter).then( res => {
        if (res.success) {
          console.log(res.result);
          this.pageData = res.result ? res.result : {}
          const estatus = this.pageData.records.some(item => {
              return item.enableStatus == 1
            });
          if(!estatus){ this.$message.info('当前没有策略为启用状态，请选择一个策略')}
          this.loading = false
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    }
  }
  </script>
  
  <style lang="less" scoped>
  .search-wrapper-btn {
    position: absolute;
    right: 1%;
    top: 22px;
    z-index: 100;
  }
  </style>